<template>
  <div class="dashboard-container">
    <el-col :xs="24">
      姓名：<el-input
        v-model="name"
        placeholder="请输入姓名"
        style="width: 20%"
        type="text"
      />
      身份证号码：<el-input
        v-model="CARD_ID"
        placeholder="请输入身份证号码"
        style="width: 20%"
        type="text"
      />
      <!-- 性别：<el-select
        v-model="sex"
        multiple
        collapse-tags
        style="margin-left: 20px"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        /> </el-select> -->
        <br />
      手机：<el-input
        v-model="phone"
        placeholder="请输入手机号"
        style="width: 20%"
        type="text"
      />

      职位:
      <el-select
        filterable
        remote
        clearable
        reserve-keyword
        v-model="job_id"
        placeholder="请输入职位"
        :remote-method="removeMethods"
        :loading="loadings"
      >
        <el-option
          v-for="item in this.jobList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      部门：
      <el-select
        filterable
        remote
        clearable
        reserve-keyword
        v-model="dept_id"
        placeholder="请输入部门"
        :remote-method="removeMethod"
        :loading="loading"
      >
        <el-option
          v-for="item in this.deptList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-button type="primary" @click="getEmployeeList" icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        type="success"
        @click="addOrUpdateHandle(0)"
        icon="el-icon-plus"
        >新增</el-button
      >
    </el-col>

    <!--表格-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="100">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>

      <el-table-column align="center" label="姓名" width="100">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>

      <!--性别可以加上三目运算符，将性别显示出来-->
      <el-table-column align="center" label="性别" width="100">
        <template slot-scope="scope">{{ scope.row.sex==1?'女':'男' }}</template>
      </el-table-column>

      <el-table-column align="center" label="手机号码" width="120">
        <template slot-scope="scope">{{ scope.row.phone }}</template>
      </el-table-column>

      <el-table-column align="center" label="邮箱" width="160">
        <template slot-scope="scope">{{ scope.row.email }}</template>
      </el-table-column>

      <el-table-column align="center" label="职位" width="100">
        <template slot-scope="scope">{{ scope.row.job.name }}</template>
      </el-table-column>

      <el-table-column align="center" label="学历" width="100">
        <template slot-scope="scope">{{ scope.row.education }}</template>
      </el-table-column>

      <el-table-column align="center" label="身份证号码" width="170">
        <template slot-scope="scope">{{ scope.row.CARD_ID }}</template>
      </el-table-column>

      <el-table-column align="center" label="部门" width="100">
        <template slot-scope="scope">{{ scope.row.dept.name }}</template>
      </el-table-column>

      <el-table-column align="center" label="联系地址" width="100">
        <template slot-scope="scope">{{ scope.row.address }}</template>
      </el-table-column>

      <el-table-column align="center" label="建档日期" width="100">
        <template slot-scope="scope">{{ scope.row.create_date }}</template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <!--添加绑定事件-->
          <el-button
            @click="addOrUpdateHandle(scope.row.id)"
            type="text"
            size="small"
            >修改</el-button
          >
          <!--<el-button type="text" size="small">删除</el-button>-->
          <el-button
            @click="deleteHandle(scope.row.id)"
            type="text"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页区域-->
    <el-pagination
      background
      layout="prev,pager,next"
      :page-size="pageSize"
      :current-page="pageIndex"
      :total="totalRecoreSum"
      @current-change="checkPage"
    >
    </el-pagination>

    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getEmployeeList"
    >
    </add-or-update>
  </div>
</template>

<script>
//引入对象
import { getList } from "@/api/table";
import { axios } from "@/plugins/axios";
import { mapGetters } from "vuex";
import addOrUpdate from "./employee-add-or-update.vue";

export default {
  components: { addOrUpdate },

  data() {
    return {
      //部门
      remoteOptions: [], // 远程搜索列表
      remoteLoading: false, // 是否正在从远程获取数据

      //职位
      remoteOption: [], // 远程搜索列表
      remoteLoading: false, // 是否正在从远程获取数据

      //存放部门信息
      deptList: [],
      //存放职位信息
      jobList: [],
      //是否在加载
      loading: false,
      loadings: false,
      dept_id: "",
      job_id: "",

      //分页
      list: null,
      listLoading: true,
      totalRecoreSum: 0,
      pageIndex: 1, //当前页码
      pageSize: 2, //每页显示数量
      name: "",
      CARD_ID: "",
      phone: "",
      sex: [],
      addOrUpdateVisible: false,

      //性别
      options2: [
        { value: "1", label: "男" },
        { value: "2", label: "女" },
      ],
      sex: [],
    };
  },

  created() {
    this.getEmployeeList();
  },

  methods: {
    //部门
    removeMethod(query) {
      if (query != "") {
        this.remoteOptions = [];
        console.log(this);
        //执行发送查找所有的部门请求
        this.$axios
          .get("http://localhost:8080/hrm/findDept")
          .then((response) => {
            this.deptList = response.data.depts;

            // 为每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
            for (const i of response.data.depts) {
              // 将想要展示的数据作为value
              i.value = i.id;
              i.label = i.name;
            }
            this.deptList = response.data.depts;
            console.log(this.deptList);
          });
        //延时器
        setTimeout(() => {
          this.remoteLoading = false;
          this.remoteOptions = this.deptList.filter((item) => {
            return item.label.indexOf(query) > -1;
          });
          console.log("this.remoteOptions");
          console.log(this.remoteOptions);
        }, 200);
      } else {
        this.remoteOptions = [];
      }
    },

    //职位
    removeMethods(query) {
      if (query != "") {
        console.log(this);
        //执行发送查找所有的部门请求
        this.$axios
          .get("http://localhost:8080/hrm/findJob")
          .then((response) => {
            this.jobList = response.data.jobs;

            // 为每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
            for (const i of response.data.jobs) {
              // 将想要展示的数据作为value
              i.value = i.id;
              i.label = i.name;
            }
            this.jobList = response.data.jobs;
            console.log(this.jobList);
          });
        //延时器
        setTimeout(() => {
          this.remoteLoading = false;
          this.remoteOption = this.jobList.filter((item) => {
            return item.label.indexOf(query) > -1;
          });
          console.log("this.remoteOption");
          console.log(this.remoteOption);
        }, 200);
      } else {
        this.remoteOption = [];
      }
    },

    //页码跟页数
    init() {
      this.list = [];
      this.totalRecoreSum = 0;
      this.pageIndex = 1;
      this.pageSize = 2;
    },

    checkPage(val) {
      this.pageIndex = val;
      this.getEmployeeList();
    },

    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },

    deleteHandle(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //异步请求url
          const url = "http://localhost:8080/hrm/deleteEmployee?id=" + id;
          //传进url
          this.$axios.post(url).then(function (response) {
            //判断
            if (response.data) {
              this.message({
                message: "成功删除",
                type: "success",
              });
            }
          });
          //刷新列表，调用方法
            this.getEmployeeList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      
    },

    getEmployeeList() {
      var $this = this;
      this.$axios({
        methods:"post",
        url:`http://localhost:8080/hrm/findAllemployees?pageIndex=` + this.pageIndex,
        params:{
          name:this.name,
          //sex:this.sex,
          phone:this.phone,
          CARD_ID:this.CARD_ID,
          dept_id:this.dept_id,
          job_id:this.job_id,
        }
      }).then(function (response) {
        if (response.data) {
          $this.listLoading = false;
          $this.list = response.data.employees;
          $this.totalRecoreSum = response.data.model.totalRecoreSum;
        }
      });
    },
    handleClick() {},
  },
};
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>